<template>
    <div>
        <el-row>
            <el-col :span="6" align="left">
                <span>用户ID：</span>
                <el-input placeholder="请输入用户ID" v-model="customerId" clearable style="width:50%;"></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>会员姓名：</span>
                <el-input placeholder="请输入会员姓名" v-model="customerName" clearable></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>收货人电话：</span>
                <el-input placeholder="请输入收货人电话" v-model="receiverPhone" clearable></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>时间范围：</span>
                <el-date-picker style="width:70%;"
                    v-model="time"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4" align="right">
                <el-button type="success" icon="el-icon-download" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出信息</el-button>
            </el-col>
        </el-row> 
        <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 100%">
            <el-table-column
                label="会员ID"
                fixed="left"
                prop="customerId"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="会员姓名"
                fixed="left"
                prop="customerName"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column> 
            <el-table-column
                label="收货人"
                prop="receiverName"
                align="center"
                :show-overflow-tooltip="true"
                width="120">
            </el-table-column> 
            <el-table-column
                label="收货人电话"
                prop="receiverPhone"
                align="center"
                width="150">
            </el-table-column> 
            <el-table-column
                label="收货人地址"
                prop="receiverAddr"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>
            <el-table-column
                label="订单号"
                prop="exchangeNumber"
                :show-overflow-tooltip="true"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="兑换积分"
                prop="exchangeIntegral"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="兑换礼品"
                prop="exchangeGift"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="兑换时间"
                prop="createdTime"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="理财顾问"
                prop="investmentAdviser"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="是否自提"
                fixed="right"
                prop="isPickUpSelfCN"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="兑换状态"
                fixed="right"
                align="center"
                width="120">
                <template slot-scope="scope">
                    {{scope.row.exchangeStatus=='00'?'兑换中':'兑换成功'}}
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button type="warning" size="mini" style="padding: 8px;margin: 2px" 
                @click="edit(scope.row)">修改信息</el-button>
                <!-- <el-button style="padding: 8px;margin: 2px" type="danger"
                        size="mini" @click="deleteItem(scope.row)">删除消息
                </el-button> -->
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow"
            v-loading="dialogLoading" :close-on-click-modal="false" width="800px">
            <el-row>
                <el-col :span="8">会员ID：{{dialog.customerId}}</el-col>
                <el-col :span="8">会员姓名：{{dialog.customerName}}</el-col>
                <el-col :span="8">收货人：{{dialog.receiverName}}</el-col>
            </el-row>  
            <el-row>
                <el-col :span="8">收货人电话：{{dialog.receiverPhone}}</el-col>
                <el-col :span="8">收货人地址：{{dialog.receiverAddr}}</el-col>
                <el-col :span="8">订单号：{{dialog.exchangeNumber}}</el-col>
            </el-row> 
            <el-row>
                <el-col :span="8">兑换积分：{{dialog.exchangeIntegral}}</el-col>
                <el-col :span="8">兑换礼品：{{dialog.exchangeGift}}</el-col>
                <el-col :span="8">是否自提：{{dialog.isPickUpSelfCN}}</el-col>
            </el-row> 
            <el-row>
                <el-col :span="8">创建时间：{{dialog.createdTime}}</el-col>
                <el-col :span="8">更新时间：{{dialog.updatedTime}}</el-col>
                <el-col :span="8">兑换状态：
                    <el-select v-model="dialog.exchangeStatus" placeholder="请选择" style="width:50%;">
                        <el-option
                        v-for="item in dialog.exchangeStatusArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row> 
            <el-row>
                <el-col :span="8"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button type="danger" @click="dialogShow=false">取消</el-button>
                </el-col>
            </el-row> 
        </el-dialog>
    </div>
</template>
<script>
var startTime="";
var endTime="";
var searchInfo={
    customerId:"",
    customerName:"",
    receiverPhone:"",
    startTime:"",
    endTime:"",
}
export default {
    data(){
        return{
            exportLoading:false,
            customerId:"",
            customerName:"",
            receiverPhone:"",
            time:"",
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            dialogTitle:"",
            dialogShow:false,
            dialogLoading:false,
            dialog:{
                exchangeStatusArr:[
                    {
                        value:"00",
                        label:"兑换中"
                    },
                    {
                        value:"01",
                        label:"兑换成功"
                    }  
                ]
            },
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            if(this.time){
                startTime=this.time[0];
                endTime=this.time[1];
            }else{
                startTime="";
                endTime="";
            }
            this.tableLoading=true;
            this.postRequest("/api/background/exchange_record/exchange_record_mg", {
                customerId:this.customerId,
                customerName:this.customerName,
                receiverPhone:this.receiverPhone,
                startTime:startTime,
                endTime:endTime,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        customerId:this.customerId,
                        customerName:this.customerName,
                        receiverPhone:this.receiverPhone,
                        startTime:startTime,
                        endTime:endTime,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        edit(item){
            this.dialogTitle="修改信息";
            this.dialogShow=true;
            this.dialogLoading=true;
            this.postRequest("/api/background/exchange_record/exchange_record_by_id",{
                recordId:item.recordId
            }).then(resp =>{
                this.dialogLoading=false;
                if(resp &&resp.status==200){
                    this.dialog=resp.data.obj
                    this.dialog.exchangeStatusArr=[
                        {
                            value:"00",
                            label:"兑换中"
                        },
                        {
                            value:"01",
                            label:"兑换成功"
                        }  
                    ]
                }
            })
        },
        deleteItem(item){
            this.$confirm("此操作将删除该消息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.deleteRequest("/api/background/exchange_record/delete_exchange_record?recordId="+item.recordId).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        sureAdd(){
            this.dialogLoading=true;
            this.putRequest("/api/background/exchange_record/edit_exchange_Record",{
                recordId:this.dialog.recordId,
                exchangeStatus:this.dialog.exchangeStatus
            }).then(resp=>{
                this.dialogLoading=false;
                if(resp && resp.data.status == 200){
                    this.dialogShow=false;
                    this.common.showToast('success','修改成功')
                    this.requestInfo()
                }
            })
        },
        exports(){
            this.exportLoading=true;
            var address=`/api/background/exchange_record/exchange_record_export?customerName=${searchInfo.customerName}&&customerId=${searchInfo.customerId}&&receiverPhone=${searchInfo.receiverPhone}&&startTime=${searchInfo.startTime}&&endTime=${searchInfo.endTime}`
            this.common.downloadFile(address);
            setTimeout(()=>{
                this.exportLoading=false;
            },2000) 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input,.el-textarea{
    width: 50%;
}
.el-dialog .el-row{
    height: auto;
    min-height: 50px;
}
.el-dialog .el-col{
    height: auto;
    min-height: 50px;
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}

</style>